<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=pHVwFNdPDxWs9l4CMzyL12cEEsPws9rE"></script>
</head>
<style>
    #allmap{
        width: 500px;
        height: 500px;
    }
    #content{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    #list{
        position: absolute;
        left: 0;
        top: 10px;
        list-style: none;
        width: 150px;
    }
    li{
        border: 1px solid red;
    }
</style>
<body>
    <div id="allmap"></div>
    <div id="content">
        <input type="text" id="input">
        <button id="btn">搜索</button>
        <ul id="list">
            
        </ul>
    </div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>

    //button绑定事件发送请求
    $('#btn').on('click',function(){
        $('#list').hide();
        $.ajax({
            type:'get',
            url:'http://web-bg.wanhutong.com/a/wht/cust/map/6',
            data:{
                keyword:$('#input').val(),
            },
            dataType:'json',
            success:function(result){
            console.log(result);

            // 编写自定义函数,创建标注
            function addMarker(point){
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
            }

            result.data.slice(0,10).forEach(element => {
                var lon = element.longitude;
                var lat = element.latitude;

               
                if(lon && lat){
                    var point = new BMap.Point(lon,lat);
		            addMarker(point);
                }
            })
            }
        })
    })





    var timer = null;
    $('#input').on('keyup',function(){
        var val = $(this).val();
        console.log(val);
        if(val){
            if(timer) clearTimeout(timer);
            timer = setTimeout(function(){
                $.ajax({
                    type:'get',
                    url:'http://web-bg.wanhutong.com/a/wht/cust/map/6',
                    data:{
                        keyword:val,
                    },
                    dataType:'json',
                    success:function(result){
                        console.log(result);
                        var str = '';
                        result.data.slice(0,10).forEach(element => {
                            if(element.latitude && element.longitude){
                                str += `<li lon=${element.longitude} lat=${element.latitude}>${element.name}</li>`
                            }
                        });
                        $('#list').append(str);
                    }
                })
            },2000)
            
        }
        else{
            $('#list').hide();
        }
    })


    //找到li
    $('#list').on('click','li',function(){
        //map.removeOverlays();

        var lon = JSON.parse($(this).attr('lon'));
        var lat = JSON.parse($(this).attr('lat'));
        console.log(this,lon,lat);
        var point = new BMap.Point(lon, lat);
        map.centerAndZoom(point, 15);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    })
    






	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.404, 39.915);
	map.centerAndZoom(point, 15);
	var marker = new BMap.Marker(point);  // 创建标注
	map.addOverlay(marker);               // 将标注添加到地图中
	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    map.enableScrollWheelZoom(true);    //开启鼠标滚轮播放
    
</script>
</html>